<script lang="ts" setup>
import { ref, watch } from 'vue'
import { Moon, Sunny, Search, Menu } from '@element-plus/icons-vue'
import { useDark, } from '@vueuse/core'
import { useRouter } from 'vue-router';
const activeIndex = ref('/')
const isDark = useDark()
const Searchvalue = ref('')
const drawer = ref(false)

const router = useRouter()

watch(() => router.currentRoute.value.path, (newValue, oldValue) => { // activeIndex路由改变展示问题
    activeIndex.value = newValue
    // console.log(router.currentRoute.value);

}, { immediate: false })
const openmuen = () => {
    drawer.value = false
}
</script>
<template>
    <div class="mobile">
        <el-menu class="el-menu-demo header" mode="horizontal" :ellipsis="true">
            <img  class="log" @click.stop="router.push('/')"  style="width: 45px; height:45px" src="../assets/logo.png" /><span>渔泡博客</span>
            <el-button text style="margin-left: 16px" @click="drawer = true">
                <el-icon @click="drawer = true">
                    <Menu />
                </el-icon>
            </el-button>
        </el-menu>



        <el-drawer v-model="drawer" title="Muen" style="width: 40%;" :with-header="false">
            <div class="admin">
            <div class="block">
                <img  src="../assets/admin.png" />
            </div>
            <p>SOOI</p>
            </div>

            <el-menu :default-active="activeIndex" class="  muenheader" :select="openmuen" :router="true">
            <el-menu-item @click="openmuen" index="/">首页</el-menu-item>
            <el-menu-item @click="openmuen" index="/archives">归档</el-menu-item>
            <el-menu-item @click="openmuen" index="/sort">分类</el-menu-item>
            <el-menu-item @click="openmuen" index="/tag">标签</el-menu-item>
            <el-menu-item @click="openmuen" index="/friend">友链</el-menu-item>
            <el-menu-item @click="openmuen" index="/about">关于</el-menu-item>
            <div class="drakbtn">
                <el-switch v-model="isDark" class="mt-2" inline-prompt :active-icon="Sunny" :inactive-icon="Moon" />
            </div>
            <!-- <div class="flex-grow" /> -->
            <div class="tool">
                <!-- 搜索框 -->
                <!-- <el-input v-model="Searchvalue" placeholder="Please input" class="input-with-select">
                            <template #append>
                                <el-button :icon="Search" />
                            </template>
                        </el-input> -->
                    <!-- 夜间模式按钮 -->

                    <!-- <el-dropdown>
                            <el-button type="primary">
                                切换语言<i class="el-icon-arrow-down el-icon--right" />
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="zhCn">
                                        中文
                                    </el-dropdown-item>
                                    <el-dropdown-item command="en">
                                        English
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown> -->
                </div>

            </el-menu>
        </el-drawer>
    </div>
</template>



<style lang="scss" scoped>
:deep(.el-switch.is-checked .el-switch__core){
    background-color:unset ;
}
.log{
    cursor:pointer;
}
.drakbtn{
    display: flex;
    justify-content: center;
}
.el-menu {
    border-right: none;
}

:deep(.el-drawer) {
    width: 40% !important;
}
:deep(.el-switch) {
    --el-switch-on-color:unset;
}

.mobile {
    display: none;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--el-bg-color-overlay);
    color: var(--el-text-color-primary);
}

.muenheader {
    margin: 10px auto;
}

.el-menu-item {
    height: 30px;
    justify-content: center;

}

.admin {
    text-align: center;

    .block {
        margin: 5px auto;

        img {
            width: 80px;
            border-radius: 50px;
        }
    }

    p {
        margin-left: 5px;
    }

}

@media only screen and (max-width: 800px) {

    .mobile {
        display: block;
    }
}
</style>